<template>

	<!-- 钱包页面 -->
	<view class="main">
		<view class="purse">
			<!-- 我的零钱 -->
			<view class="header">
				<view style="width: 100%;height: 100rpx;align-items: center;display: flex;justify-content: center;">
					<uni-icons type="notification-filled" size="35rpx" color="#cfcfcf"></uni-icons>
					<view style="color: #cfcfcf;font-size: 30rpx;font-weight: 600;">我的零钱</view>
				</view>
			</view>
			<!-- 零钱剩余 -->
			<view class="pennies">
				<view style="font-size: 80rpx;">￥</view>
				<view style="font-size: 80rpx;">{{balance}}</view>
			</view>
			<!-- 可提现 -->
			<view class="recharge" @click="yy">
				<view class="sa" hover-class="sb" >充值</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup">
				<view class="ph">充值</view>
				<view class="pc"><input placeholder=" 请输入你想充值的金额" style="border-bottom: 0.5rpx #cfcfcf solid;height: 0rpx;" type="number" @input="input"/></view>
				<view class="pb">
					<view class="pbb" style="border-right: #cfcfcf 0.5rpx solid;" hover-class="pbc" @click="sumbit">取消</view>
					<view class="pbb" hover-class="pbc" @click="close">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/common/request.js'

	export default {
		data() {
			return {
				id:null,
				balance:null,//用户充值的金额数
				full:null
			}
		},
		methods: {
			yy() {
				this.$refs.popup.open()
			},
			close(){
				this.full=null
				this.$refs.popup.close()
			},
			sumbit(){
				const balanceAdd={
					userId:this.id,
					money:this.full*1
				}
				console.log(balanceAdd);
				request('/balance/topup',balanceAdd,'POST').then((res)=>{
					console.log(res);
				})
			},
			input(e){
				this.full=e.detail.value
			}
		},
		onLoad(){
			const info = uni.getStorageSync('userInfo');
			this.id=info.id
			request('/balance/get/'+this.id,'','GET').then((res)=>{
				this.balance=res.balance
			})
		}
	}
</script>

<style>
	.main {
		width: 100%;
		height: 100%;
		background-color: #f9fff8;
	}

	.purse {
		width: 100%;
		height: 50%;
		background-color: white;
		border-bottom: solid 0.5rpx #c7c7c7;
	}

	.header {
		height: 30%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	.pennies {
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.recharge {
		height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sa {
		height: 100rpx;
		width: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0.5rpx solid #b5b5b5;
		background-color: #c0c5c0;
		border-radius: 10rpx;
		box-shadow: 10px 5px 5px #a3a7a3;
		font-weight: 700;
	}

	.sb {
		height: 100rpx;
		width: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0.5rpx solid #b5b5b5;
		background-color: #a3a7a3;
		border-radius: 10rpx;
		box-shadow: 10px 5px 5px #a3a7a3;
	}
	
	.popup{
		width: 500rpx;
		height: 350rpx;
		border-radius: 4%;
		background-color: white;
		overflow: hidden;
		box-shadow: 10px 5px 5px #838383
	}
	
	.ph{
		width: 100%;
		height: 20%;
		background-color: aquamarine;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pc{
		width: 100%;
		height: 58%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}
	
	.pb{
		width: 100%;
		height: 22%;
		border-top: 0.5rpx solid #d8d8d8;
		display: flex;
	}
	
	.pbb{
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pbc{
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d4d4d4;
	}
</style>